/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-use-before-define */
/**
 * 中邮大屏数据
 *  */
import React, { useRef, useState, useEffect } from 'react';
import { Row, Col } from 'antd';
import { connect, useDispatch } from 'dva';
import { useFullscreen, useInterval, useUpdateEffect } from 'ahooks';
import classnames from 'classnames';
import bg_big from '@/assets/bigScreen/bg_big.png';
import bg_header from '@/assets/bigScreen/bg_header.png';
import zoom_in from '@/assets/bigScreen/zoom_in.png';
import zoom_out from '@/assets/bigScreen/zoom_out.png';
import moment from 'moment';
import YesterdayDate from './components/YeasterDate';
import RealTimeArea from './components/RealTimeArea';
import YesterdayInNum from './components/YeasterdayInNum';
import LiveStream from './components/LiveStream';
import InOutNumbers from './components/InOutNumbers';
import BrandsRate from './components/BrandsRate';
import GpScanNumbers from './components/GpScanNumbers';
import Map from './components/Map';
import styles from './index.less';
import { registerShape, changeScale } from './components/_utils';
import ScreenLogo from './components/CommonComp/Logo';

registerShape('round-rect');

/**
 * 中邮驿站大屏
 *  */
function BigScreen({ areaName, currentLevel, screenToken }) {
  const dispatch = useDispatch();
  const [title, setTitle] = useState('全国');
  const [time, setTime] = useState('');
  const [yesterdayType, setYesterdayType] = useState('order');
  const ref = useRef();
  const [isFullscreen, { toggleFull }] = useFullscreen(document.body);

  useInterval(
    () => {
      setTime(moment().format('llll'));
    },
    1000,
    {
      immediate: true,
    },
  );

  useEffect(() => {
    if (screenToken) {
      dispatch({
        type: 'global/getScreenLoginInfo',
        payload: {
          token: screenToken,
        },
      });
    }
  }, []);

  useUpdateEffect(
    () => {
      setTitle(areaName || '');
      setTimeout(() => {
        const boxDom = document.getElementById('main-title-box');
        const numDom = document.getElementById('main-title');
        changeScale(numDom, boxDom);
      }, 1000);
    },
    [areaName, currentLevel],
  );

  const onTitleSelect = ({ key }) => {
    setYesterdayType(key);
  };

  return (
    <div
      className={classnames(styles.main, {
        [styles.full]: isFullscreen,
      })}
      ref={ref}
    >
      <img src={bg_big} alt="" className={styles.main_img} />
      <img src={bg_header} alt="" className={styles.main_bg_header} />
      <div className={styles.content}>
        <Row className={styles.header} type="flex" justify="space-between" align="middle">
          <Col span={6} className="logo">
            <Row type="flex" align="middle">
              <Col span={24} className={styles['logo-img']}>
                <ScreenLogo platform="zyyz" />
              </Col>
            </Row>
          </Col>
          <Col id="main-title-box" className={styles['main-title-box']} span={11}>
            <span id="main-title" className={styles['main-title']}>
              {`${title}三级物流体系大数据中心`}
            </span>
          </Col>
          <Col span={6}>
            <Row type="flex" justify="end" align="middle" gutter={[20, 20]}>
              <Col className={styles['right-header-text']}>{time}</Col>
              <Col className={styles.zoom}>
                <img src={isFullscreen ? zoom_in : zoom_out} alt="" onClick={toggleFull} />
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className={styles.body} style={{ flex: 1 }} type="flex">
          <Col span={6}>
            <Row
              className={styles['body-left']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24} style={{ flex: 1 }}>
                <YesterdayDate isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <YesterdayInNum
                  type={yesterdayType}
                  showSelect
                  onSelect={onTitleSelect}
                  isParentFull={isFullscreen}
                />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <YesterdayInNum type="in" isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
          <Col span={12}>
            <Row
              className={styles['body-center']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24}>
                <RealTimeArea type={yesterdayType} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <Map isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row
              className={styles['body-right']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24} style={{ flex: 1 }}>
                {yesterdayType == 'order' ? (
                  <LiveStream type={yesterdayType + 1} isParentFull={isFullscreen} />
                ) : (
                  <GpScanNumbers isParentFull={isFullscreen} />
                )}
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <InOutNumbers isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <BrandsRate isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  );
}

export default connect(({ chartData, global }) => ({
  screenToken: global.screenToken,
  userInfo: global.screenLoginInfo,
  areaName: chartData.currentAreaInfo.currentName,
  currentLevel: chartData.currentAreaInfo.currentLevel,
}))(React.memo(BigScreen));
